<template>
    <div>

        <el-card class="margin-top-sm">
            <div slot="header" class="clearfix">
                <h2>修改个人信息</h2>
            </div>
            <div>
                <el-form ref="editModalForm" v-if="editShow == true" :model="formData" label-width="80px" size="mini"
                    :rules="rules">
                    <el-form-item label="账号" prop="UserName">
                        <el-input v-model="formData.UserName" clearable :disabled="true"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="Email">
                        <el-input v-model="formData.Email" clearable> </el-input>
                    </el-form-item>
                    <el-form-item label="名称" prop="Name">
                        <el-input v-model="formData.Name" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="PhoneNumber">
                        <el-input v-model="formData.PhoneNumber" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="头像" prop="ImageUrls">
                        <UploadImages v-model="formData.ImageUrls"></UploadImages>
                    </el-form-item>

                    <el-form-item label="出生年月" prop="Birth">
                        <el-date-picker type="date" value-format="yyyy-MM-dd 00:00:00" placeholder="选择日期"
                            v-model="formData.Birth" clearable></el-date-picker>
                    </el-form-item>



                </el-form>
                <div style="display: flex;justify-content: flex-end;">
                    <el-button type="primary" @click="CreateOrEdit">确 定</el-button>
                </div>
            </div>
        </el-card>

    </div>
</template>

<script>
import store from "@/store/index.js"
import { mapGetters } from "vuex";
export default {

    computed: {
        ...mapGetters(["UserInfo", 'UserId'])
    },
    data() {
        return {
            editShow: false,
            formData: {},
            rules: {
                UserName: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                Password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                Email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
                            if (!value || !reg.test(value)) {
                                callback(new Error('请输入正确邮箱'));
                            }
                            else {
                                callback();
                            }
                        }, trigger: 'blur'
                    },
                ],
                Name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                PhoneNumber: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            var reg = /^1[34578]\d{9}$/;
                            if (!value || !reg.test(value)) {
                                callback(new Error('请输入正确的手机号'));
                            }
                            else {
                                callback();
                            }
                        }, trigger: 'blur'
                    },
                ],
                Birth: [
                    { required: true, message: '请输入出生年月', trigger: 'blur' },
                ],
                ImageUrls: [
                    { required: true, message: '请输入头像', trigger: 'blur' },
                ],
            },

        }
    },
    created() {
        this.ShowEditModal();
    },
    methods: {

        //获取用户信息
        async ShowEditModal() {

            let { Data } = await this.$Post("/User/Get", { Id: this.UserId })
            this.formData = Data;
            this.editShow = true;

        },
        //创建或者修改
        async CreateOrEdit() {
            this.$refs.editModalForm.validate(async (valid) => {
                if (valid) {
                    //保存数据到数据库
                    let { Success, Msg, Data } = await this.$Post("/User/CreateOrEdit", this.formData);
                    if (Success) {

                        this.$message.success("修改成功!");

                        store.dispatch("GetInfo");


                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

    }
}
</script>

<style></style>